<template>
  <div id="date">
    <!-- <div class="date-headed">
             <h1>
      <i class="fa fa-angle-left" @click="put"></i>
      <span>{{ year }}年{{ month }}月</span>
      <i class="fa fa-angle-right" @click="add"></i>
    </h1>
    </div>
    <ol>
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ol>
    <div style="height: 19rem; background: #fff;">
      <ul>
        <div v-bind:style="{ width: w + '%' }"></div>
        <li v-for="(val, key) in m" :key='key'>
          <span>{{ val }}</span>
          <img v-if="test(key)" src="../../../assets/iconfont/gou.svg" />
        </li>
      </ul>
    </div> -->

<div class="calendar">
  <div class="calendar-header">
    <div style="background-color: #F5F5F5;border-radius:0.71rem;display:flex;justify-content: center; align-items: center;height:2rem;margin-top: 1rem;">
      <div class="icon-operate icon-pre" @click="handlePreMonth">◀</div>
      <div class="calender-header-date">{{ currentYear }}年{{ currentMonth }}月</div>
      <div class="icon-operate icon-next" @click="handleNextMonth">▶</div>
    </div >
  </div>
  <div class="calendar-body">
       <div class="calendar-week flex-wrap">
            <div v-for="(item,index) in weekList" :key="index" class="days-col" style="color:#999999">{{item}}</div>
       </div>
       <div class="calendar-days flex-wrap">
          <div v-for="(item,index) in monthDayList" :key="index" :class="{'days-col':true,'is-signed':item?isSigned(item.date, formatSignedList):false,'is-today':item?item.date==today?sign_status?false:true:false:false}">
                <div :class="{'days-col-text':true,'last-day': item?isLastDay(item.time):false}">{{item ? formatZero(item.day) : ''}}</div>
              </div>
            </div>
  </div>
</div>
  </div>

</template>
<script>
import member_datecontroller from "./member_datecontroller";
export default member_datecontroller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>

#date {
  width: 21.5625rem;
  border-radius: 0.375rem;
  overflow: hidden;
  margin: 0 auto;
  .date-headed{
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    .left{
      width: 0;
      height: 0;
       border-top: 0.5rem solid transparent;
      border-right: 0.6rem solid#999999;
      border-bottom: 0.5rem solid transparent;
            position: relative;
       top: 0.8rem;
    }
    .right{
            width: 0;
      height: 0;
       border-top: 0.5rem solid transparent;
      border-left: 0.6rem solid#999999;
      border-bottom: 0.5rem solid transparent;
      position: relative;
       top: 0.8rem;
      transform: rotate(180edg);
    }
  }
  .calendar{
    background-color: #ffffff;
    margin: 0 auto;
    width: 21.36rem;
    border-radius:0.71rem;
    .flex-wrap{
    display: flex;
    flex-wrap: wrap;
  }
    .calendar-header{
    text-align: center;
    padding: 1rem;
    font-size: 40rpx;
     .icon-operate{
    display: inline-block;
    /* font-size: 40rpx; */
    color: #666666;
    font-size:1.13rem;
     }
     .disabled{
    color: #999999;
  }
    .calender-header-date{

    display: inline-block;
    margin: 0 3rem;
    color:#333333;
    font-size:1.13rem;
    font-weight:Bold
  }
    }
    .calendar-body{
      .days-col{
        margin: 0.5rem 0;
        width: 14.28%;
        text-align: center;

      }
        .days-col-text{
          display: block;
          margin: auto;
          width: 2.14rem;
          height: 2.14rem;
          line-height: 2.14rem;
          text-align: center;
          border-radius: 50%;
          font-size: 1rem;
      }
     .is-signed .days-col-text{
    background-color: #F84949;
    color: #ffffff;
     }
      .is-today .days-col-text{
    background-color: #ffffff;
    color:#F84949 ;
  }
  .last-day{
    color: #999999;
  }
    }
  }

}
</style>
